<template>
    <div class="gPaySuccess">
        <x-header title="支付成功" :left-options="{backText:'',preventGoBack:true}" class="whiteHeader" @click.native='goOrder'></x-header>
        <!-- 拼团进行中start -->
        <div class="gPaySuccessTop" v-if="gStatus == 2">
            <div class="gPaySuccessTopText">
                <p v-if='allDatas.GROUPON_USER_PID==0'>开团成功</p>
                <p v-if='allDatas.GROUPON_USER_PID!=0'>参团成功</p>
            </div>
            <div class="gPaySuccessTopInfo">
                <p>还差<span>{{allDatas.DIFFER}}</span>人，剩&nbsp;<span>{{countTime}}</span>&nbsp;自动结束</p>
            </div>
            <div class="gPaySuccessTopInvite" @click="goShare">
                <p>立即邀请好友参团</p>
            </div>
            <div class="gPaySuccessTopImg">
                <img src="../../assets/image/groupPurchase/process.png" alt="" />
            </div>
        </div>  
        <!-- 拼团进行中end -->
        <!-- 拼团成功start -->
        <div class="gPaySuccessTopS" v-if="gStatus == 1&&allDatas.GROUPON_TYPE!=2">
            <div class="gPaySuccessTopFull">
                <p>人满成团</p>
            </div>
            <div class="gPaySuccessTopCon">
                <p>恭喜，拼团成功，耐心等待收货吧~</p>
            </div>
            <div class="gPaySuccessTopImg">
                <img src="../../assets/image/groupPurchase/process.png" alt="" />
            </div>
        </div>
        <!-- 一分开团成功 -->
        <div class="gPaySuccessTopS" v-if="gStatus == 1&&allDatas.GROUPON_TYPE==2">
            <div class="gPaySuccessTopFull">
                <p style='color:#F22E2E;'>等待开奖</p>
            </div>
            <div class="gPaySuccessTopCon">
                <p>拼团成功，等待开奖，开奖结果请留意公众号或者车网通APP提醒</p>
            </div>
            <div class="gPaySuccessTopImg">
                <img src="../../assets/image/groupPurchase/winingProcess.png" alt="" style="width:6.39rem" />
            </div>
        </div>
        <!-- 拼团成功end -->
        <!-- 拼团失败start -->
        <div class="gPaySuccessTopS" v-if="gStatus == 3">
            <div class="gPaySuccessTopFull">
                <p>拼团失败</p>
            </div>
            <div class="gPaySuccessTopCon">
                <p>拼团失败</p>
            </div>
            <div class="gPaySuccessTopImg">
                <img src="../../assets/image/groupPurchase/process.png" alt="" />
            </div>
        </div>
        <!-- 拼团失败end -->
        <div class="moreGroupon" v-show="allData">
            <div class="moreGrouponTitle">
                <img src="../../assets/image/groupPurchase/moreGroupon.png" alt="" />
            </div>
            <!-- <div class="userLikeHead">
                <div class="line"></div>
                <span>更多拼团</span>
            </div> -->
            <div class="allProduct">
              <div class="listItem productBorder" v-for='item in allData' @click='goShopDetail(item.SERVDETAIL_ID)'>
                <img :src="item.SERVDETAIL_PHOTO" alt="" />
                <p>{{item.REMARK}}</p>
                <h2>{{item.SERVDETAIL_NAME}}</h2>
                <div class="price">
                  <span>拼团价:<label>￥</label>{{item.GROUPONGOODS_PRICE}}</span>
                  <s>￥{{item.SERVDETAIL_PRICE}}</s>
                </div>
              </div>
            </div>
        </div>
        <!--分享弹窗-->
        <shareToast :share='showShare' @close-share='closeShare'></shareToast>
    </div>
</template>
<script>
/*支付成功*/
import { XHeader } from 'vux';
import { setCookie, getCookie, appid,GetQueryString,iosAdroidWx,reloads } from '../../util/commonUtils';
import shareToast from '../../components/shareToast.vue'; //分享弹框
import wx from 'weixin-js-sdk'//微信jssdk
export default {
    name: "gPaySuccess",
    // 数据
    data() {

        return {
            userId: '',
            newTime: '', //关闭时间（毫秒数）
            countTime: '', //倒计时
            timer: '', //定时器
            allData: '', //更多拼团数据
            id: '', //团用户ID
            allDatas: '', //团购详情数据
            gStatus: '', //团购状态 1-拼团成功 2-拼团进行中 3-拼团失败
            showShare: false  //分享弹窗是否显示
        }
    },
    // 计算属性
    computed: {

    },
    // 创建（实例创建完成）
    created() {
        this.userId = getCookie('loginkey');
        //this.userId = 229271;
        this.id = this.$route.params.id;
        let fromWhere=GetQueryString('from');
        if(fromWhere=='singlemessage' || fromWhere=='groupmessage' || fromWhere=='timeline'){
            location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/groupDetail/'+this.id;
            return;
        }
        if(sessionStorage.getItem('reload')){
            sessionStorage.removeItem('reload');
        }else{
            sessionStorage.setItem('reload',1);
            reloads();
            return;
        }
        //团购详情（包含更多拼团）
        this.$fetchPost('/Groupon/getGrouponGoodsDetail', {
            GROUPON_USER_ID: this.id,
            USER_ID: this.userId
        }).then(
                res => {
                    this.allDatas = res;
                    this.newTime = this.allDatas.CLOSE_TIME;//团购关闭时间
                    this.allData = this.allDatas.GUESS_LIKE;//猜你喜欢
                    this.gStatus = this.allDatas.GROUPON_STATUS;//团购状态
                    this.timer = setInterval(() => this.remainTime(), 1000);
                    if(this.allDatas.DIFFER>0){
                        let imgUrl=this.allDatas.SERVDETAIL_PHOTO;
                        let title=`【还剩${this.allDatas.DIFFER}个名额】，一起${this.allDatas.GROUPONGOODS_PRICE}元拼${this.allDatas.SERV_SUBJECT}`;
                        this.getConfig(imgUrl,title);
                    }else{
                        let imgUrl=this.allDatas.SERVDETAIL_PHOTO;
                        let title=`一起开团，享受超值${this.allDatas.GROUPONGOODS_PRICE}元拼${this.allDatas.SERV_SUBJECT}`;
                        this.getConfig(imgUrl,title);
                    }
                }, err => console.log(err)
        );
        // this.remainTime(); //少了这个会延迟一秒才有倒计时
        // this.timer = setInterval(() => this.remainTime(), 1000);
    },
    // el被创建，并挂载到实例上
    mounted() {

    },
    // 方法（实例中的方法）-----------
    methods: {
        goOrder(){
            this.$router.push('/order/0');
        },
        // 保留2位整数
        twoNum(n) {
            return n < 10 ? '0' + n : n;
        },
        // 剩余时间（倒计时）
        remainTime() {

            let ms = this.newTime - new Date().getTime();
            let sec = Math.floor(ms / 1000);
            if (sec >= 0) {
                let h = Math.floor(sec % 86400 / 3600);
                let m = Math.floor(sec % 86400 % 3600 / 60);
                let s = sec % 60
                this.countTime = this.twoNum(h) + ':' + this.twoNum(m) + ':' + this.twoNum(s);
            } else {
                clearInterval(this.timer);
                this.countTime = '00:00:00';
            }
        },
        //打开分享弹窗
        goShare() {
            this.showShare = true;
        },
        //关闭分享弹窗
        closeShare() {
            this.showShare = false;
        },
        goShopDetail(id){
            this.$router.push('/shopDetail/'+id);
        },
        //获取微信的配置信息
        getConfig(imgUrl,title) {
            let timestamp, nonceStr, signature;
            let desc = '全民火拼，拼团专享优惠，超值一拼到底';
            let urls=iosAdroidWx().urls;
            let appid=iosAdroidWx().appid;
            this.$fetchPost(urls, {'url': window.location.href}, {emulateJSON: true}).then(res => {
                var data = res;
                // timestamp = data.timestamp;
                // nonceStr = data.nonceStr;
                // signature = data.signature;
                timestamp=data.NOW_TIME;
                nonceStr=data.NONCESTR;
                signature=data.SKEY;
                // console.log(timestamp,nonceStr,signature,appId)
                wx.config({
                    debug: false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: appid, // 必填，公众号的唯一标识
                    timestamp: timestamp, // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature, // 必填，签名，见附录1
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseWXPay', 'showOptionMenu']
                });
                let that = this;
                let linkUrl = location.href;
                wx.ready(function () {
                    // 分享给朋友
                    wx.onMenuShareAppMessage({
                        title: title,
                        desc: desc,
                        link: linkUrl,
                        imgUrl: imgUrl,
                        trigger: function (res) {
                        },
                        success: function (res) {
                        },
                        cancel: function (res) {
                        },
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });

                    //分享朋友圈
                    wx.onMenuShareTimeline({
                        title: title,
                        desc: desc,
                        link: linkUrl,
                        imgUrl: imgUrl,
                        trigger: function (res) {
                        },
                        success: function (res) {
                        },
                        cancel: function (res) {
                        },
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });
                })
            }, err => {

            });
        }
    },
    // 子组件
    components: {
        XHeader,
        shareToast
    }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.gPaySuccess {
    height: 100%;
    background: #fff;
    .gPaySuccessTop{
        height: 4.85rem;
        background: #fff;
        .gPaySuccessTopText{        
            padding-top: .79rem;                    
            p{
                font-size: .3rem;
                color: #222;
                font-weight: bold;                        
            }
        }
        .gPaySuccessTopInfo{
            margin-top: .35rem;
            p{
                font-size: .26rem;
                color: #666;
                span:nth-child(1){
                    color: #ec2121;
                }
                span:nth-child(2){
                    font-size: .28rem;
                    color: #333;
                }
            }
        }
        .gPaySuccessTopInvite{
            width: 5.2rem;
            height: .72rem;
            margin: 0 auto;
            background: #EC2121;
            display: flex;
            justify-content: center;
            border-radius: .08rem;
            margin-top: .31rem;
            p{
                align-self: center;
                font-size: .28rem;
                color: #fff;
            }
        }
        .gPaySuccessTopImg{
            margin-top: .48rem;
            display: flex;
            justify-content: center;
            img{
                align-self: center;
                width: 6.12rem;
                height: 1.04rem;
            }
        }
    }
    .gPaySuccessTopS{
        padding-bottom: 0.3rem;
        background: #fff;            
        .gPaySuccessTopFull{
            padding-top: .7rem;
            p{
                font-size: .3rem;
                color: #222;
                font-weight: bold;
            }
        }
        .gPaySuccessTopCon{
            width: 5.2rem;
            margin: 0.34rem auto 0;
            p{
                font-size: .26rem;
                line-height: 1.6;
                color: #666;
            }
        }
        .gPaySuccessTopImg{
            margin-top: .48rem;
            display: flex;
            justify-content: center;
            img{
                align-self: center;
                width: 6.12rem;
                height: 1.04rem;
            }
        }
    }
    .moreGroupon{
        border-top: .2rem solid #efeff4;
        background: #fff;
        .moreGrouponTitle{
            display: flex;
            justify-content: center; 
            padding-top: .34rem;
            margin-bottom: .29rem;
            img{
                width: 2.2rem;
                height: .29rem;
            }
        }
        .userLikeHead{
            position: relative;
            height: 1rem;
            .line{
                width: 2.4rem;
                height: 0.02rem;
                position: absolute;
                background: #222;
                top: 50%;
                left: 50%;
                transform:scaleY(0.5) translate(-50%,-50%);
            }
            span{
                font-size: 0.3rem;
                color: #222;
                line-height: 1rem;
                padding: 0 0.1rem;
                background: #fff;
                line-height: 0.5rem;
                position: absolute;
                top: 50%;
                left: 50%;
                transform:translate(-50%,-50%);
            }
        }
        .allProduct{
            display: flex;
            justify-between:space-around;
            flex-wrap:wrap;
            .listItem{
               padding: 0rem 0 0.9rem 0;
               margin: 0 0.1rem 0.1rem 0.175rem;
               box-sizing: border-box;
               position: relative;
               img{
                width: 3.5rem;
                height: 3rem;
                background: #f7f7f7;
                display: block;
               }
               h2{
                width: 3.5rem;
                margin-top: 0.2rem;
                font-size: 0.26rem;
                line-height: 0.35rem;
                padding: 0 0.15rem;
                color: #222;
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
               }
               p{
                font-size: 0.22rem;
                z-index: 2;
                height: 0.5rem;
                line-height: 0.5rem;
                position:relative;
                width: 3.46rem;
                margin: 0 auto;
                background: #f7f7f7;
                color: #EC2121;
               }
               .price{
                width: 3.5rem;
                position: absolute;
                bottom: 0.1rem;
                display: flex;
                justify-content:space-between;
                align-items:flex-end;
                padding: 0.15rem 0.2rem 0.05rem 0.2rem;
                 s{
                  font-size: 0.23rem;
                  color: #999;
                 }
                 span{
                  font-size: 0.28rem;
                  color:#f22e2e;
                  padding-right: 0.15rem;
                  label{
                    font-size: 0.2rem;
                  }
                 }
               }
            }
            .listItem:nth-child(2n){
              padding: 0rem 0rem 0.1rem 0;
              margin: 0 0.175rem 0.1rem 0;
            }
          }
        /*边框一像素*/
        .productBorder{
          position:relative;
        }
        .productBorder::after {
          content: "";
          box-sizing: border-box;
          position: absolute;
          left: 0;
          top: 0;
          width: 200%;
          height: 200%;
          transform:scale(0.5,0.5);
          transform-origin:0 0;
          border: 1px solid #e1e2df;
        }
    }
}
</style>

